<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
		<link rel="stylesheet" href="../../dist/css/tom-select.bootstrap5.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
		<script src="../../dist/js/tom-select.complete.js"></script>
		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script> -->
		<script src="bootstrap.bundle.js"></script>
		<style>
		.has-items .ts-control > input::placeholder {
		   color:transparent;
		}
</style>
	</head>
	<body>

		<div class="p-4">
			<form method="get">
			<div class="py-3">
				<input name="before" autocomplete="off" />
			</div>
	
			<div class="py-3">
				<label for="input-tags">label</label>
				<select id="input-tags" placeholder="How cool is this?" multiple>
					<optgroup label="A">
						<option>One</option>
						<option>Two</option>
					</optgroup>
					<optgroup label="B">
						<option>One</option>
						<option>Two</option>
					</optgroup>
				</select>
			</div>
			<div class="py-3">
				<input name="after" autocomplete="off" />
			</div>
			<button type="submit">submit</button>
			</form>
		</div>



	<script>

	var ts = new TomSelect("#input-tags",{
		//persist: false,
		//createOnBlur: true,
		create: true,
		duplicates: true,
		//hidePlaceholder: true,
	});

	</script>
</html>
